<!-- 进销存表 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35">
						<view class="flex flex-c f-30 text-color"> 入库 </view>
						<view class="flex flex-c f-30 m-b-10"> 0 </view>
						<view class="flex flex-c f-30 m-b-10"> 0匹 </view>
					</view>
					<view class="f-35">
						<view class="flex flex-c f-30 text-color"> 出库 </view>
						<view class="flex flex-c f-30 m-b-10"> 0 </view>
						<view class="flex flex-c f-30 m-b-10"> 0匹 </view>
					</view>
					<view class="f-35">
						<view class="flex flex-c f-30 text-color"> 累存 </view>
						<view class="flex flex-c f-30 m-b-10"> 0 </view>
						<view class="flex flex-c f-30 m-b-10"> 0匹 </view>
					</view>
				</view>
				<view class="flex flex-c m-b-20 p-b-20">
					<text>前存</text>
					<text class="m-l-20 m-r-20">0</text>
					<text>(0匹)</text>
				</view>
			</view>
		</u-scroll-list>
		
		<u-sticky offset-top="0">
			<view class="flex flex-sa nav-view">
				<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="true">
						<text class="m-r-10">07-17今日</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
				<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="false">
						<text class="m-r-10" style="color: #60b4f6;">{{params.data.name}}</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10">仓库</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
				<view class="flex flex-c f-28" style="flex: 1;" @click="toShop">
					<template v-if="false">
						<text class="m-r-10" style="color: #60b4f6;">{{params.data.name}}</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10">门店</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
			</view>
			<view class="flex flex-sa nav-view">
				<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="false">
						<text class="m-r-10" style="color: #60b4f6;">{{params.data.name}}</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10" @click="toProduc">产品</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
				<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="false">
						<text class="m-r-10" style="color: #60b4f6;">{{params.data.name}}</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10" @click="toColor">颜色</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
				<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="false">
						<text class="m-r-10" style="color: #60b4f6;">{{params.data.name}}</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10">布类别</text>
						<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
					</template>
				</view>
			</view>
		</u-sticky>
		<view style="height: 100%;">
		  <zb-table
		      :columns="column3"
		      :stripe="false"
		      @rowClick="rowClick"
		      @toggleRowSelection="toggleRowSelection"
		      @toggleAllSelection="toggleAllSelection"
		      :border="true"
		      @edit="buttonEdit"
			  :highlight="true"
		      @dele="dele"
		      :data="data"></zb-table>
		</view>
		
		<!-- 底部tab -->
		<u-tabbar
			:value="value6"
			@change="name => value6 = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="库存" icon="home" ></u-tabbar-item>
			<u-tabbar-item text="布分类" icon="home" ></u-tabbar-item>
			<u-tabbar-item text="产品" icon="photo" ></u-tabbar-item>
			<u-tabbar-item text="明细" icon="home" ></u-tabbar-item>
		</u-tabbar>
		
		<!-- 筛选弹框 -->
		<u-popup :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
		    <view class="pop-view">
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
		        </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				config: {
				  title: "进销存表",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				value6: 'home',
				show: false,
				params: {
					data: {
						name: '明细仓'
					}
				},
				column3: [
					{ name: 'name', label: '名',fixed:true,width:80,emptyString:'--' },
					{ name: 'age', label: '产品', sorter:false,align:'right', },
					// { name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
					// { name: 'img', label: '图片',type:"img" },
					{ name: 'address', label: '颜色', sorter: 'custom', align:'right' },
					{ name: 'province', label: '前存', sorter: 'custom', align:'right' },
					{ name: 'city', label: '入库', sorter: 'custom', align:'right' }
				],
				data: [{
						date: '2016-05-02',
						name: '',
						price: 0,
						province: '上海',
						admin: "admin",
						sex: '1',
						checked: true,
						id: "20",
						img: ["https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
							'https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg'
						],
						age: 0,
						city: '普陀区',
						address: '上海市普上海市普上海市普上海市普',
						zip: 200333
					},
					{
						date: '2016-05-01',
						name: '王小虎2',
						province: '上海',
						sex: '0',
						price: 0,
						id: "2",
						age: 12,
						city: '普陀区',
						img: "https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
						address: '上海市普',
						zip: 200333
					},
					{
						date: '2022-03-25T09:27:42',
						name: '王小虎3',
						province: '上海',
						sex: 1,
						price: 33,
						id: "3",
						age: '15',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						city: '普陀区',
						address: '上海市普',
						zip: 200333555
					},
					{
						date: '2016-04-02',
						name: '王小虎4',
						province: '上海',
						sex: 1,
						age: '11',
						price: 33,
						id: "4",
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						city: '普陀区',
						address: '上海市普',
						zip: 200333
					},
					{
						date: '2016-03-02',
						name: '王小虎5',
						province: '上海',
						price: 0,
						sex: 1,
						age: '14',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						id: "5",
						city: '普陀区',
						address: '上海市普',
						zip: 200333
					}, {
						date: '2014-05-02',
						name: '王小虎6',
						province: '上海',
						price: 33,
						sex: 1,
						id: "6",
						age: '12',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						city: '普陀区',
						address: '上海市普',
						zip: 0
					}, {
						date: '2019-05-02',
						name: '王小虎7',
						price: 33,
						province: '上海',
						sex: 1,
						age: 0,
						id: "7",
						city: '普陀区',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						address: '上海市普',
						zip: 200333
					}, {
						date: '2012-05-02',
						name: '王小虎8',
						province: '上海',
						price: 0,
						sex: 1,
						age: '29',
						id: "8",
						city: '普陀区',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						address: '上海市普',
						zip: 200333
					}, {
						date: '2011-05-02',
						name: '王小虎91',
						price: 33,
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						province: '上海',
						sex: 1,
						id: "9",
						age: '30',
						city: '普陀区',
						address: '上海市普',
						zip: 200333
					}, {
						date: '2011-05-02',
						name: '王小虎10',
						province: '上海',
						sex: 1,
						id: "10",
						age: '30',
						img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						city: '普陀区',
						address: '上海市普',
						zip: 200333
					}, {
						date: '2011-05-02',
						name: '王小虎20',
						province: '上海',
						sex: 1,
						price: 33,
						id: "11",
						age: '30',
						city: '普陀区',
						address: '上海市普',
						zip: 200333
					}
				],
			}
		},
		methods: {
			// 跳转门店
			toShop() {
				uni.navigateTo({
					url: '/pages/selects/shop/index'
				})
			},
			// 跳转产品
			toProduc() {
				uni.navigateTo({
					url: '/pages/application/pages/cloth/customer-product/index'
				})
			},
			// 跳转颜色
			toColor() {
				// 先选产品后选颜色
				
				uni.navigateTo({
					url: '/pages/application/pages/cloth/color/index'
				})
			},
			rowClick(row, index) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '单击某行'
				})
				console.log('单击某行', row, index)
			},
			toggleRowSelection(checked, arr) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '点击单选'
				})
				console.log('单选', checked, arr)
			},
			toggleAllSelection(checked, arr) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '点击全选'
				})
				console.log('全选', checked, arr)
			},
			buttonEdit(ite, index) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '点击编辑'
				})
				console.log(ite, index)
			},
			dele(ite, index) {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '点击删除'
				})
				// alert('点击删除')
				console.log(ite, index)
			},
			
			
			clickBtn(item) {
			  console.log("index", item);
				if (item.key === "btn1") {
					// this.$Router.push({
					//   name: "financeAccountDetails",
					// });
			
					this.show = true
				}
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.nav-view {
		background-color: #fff;
		height: 80rpx;
		color: #999;
	}
	.green {
		color: #53c21d;
	}
	.blue {
		color: #409EFF;
	}
	.grey {
		color: #999;
	}
	.pop-view {
		width: 500rpx;
		padding-top: 88rpx;
		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}
		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
</style>